<?php require_once('ruta.inc.php'); ?>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>GIS</title>
        <link rel="shortcut icon" href="favicon.png">
        <link rel="stylesheet" type="text/css" href="estilos.css">
        <script src="OpenLayers.js" type="text/javascript"></script>
        <script src="OpenLayersSpanish.js" type="text/javascript"></script>
        <script src="jquery-1.7.min.js" type="text/javascript"></script>
        <script type="text/javascript" charset="utf-8">
        var overlays = [];
        overlays[0] =  { name: "Cursos de agua", layer: "curso_de_agua_hid", base: false };
        overlays[1] =  { name: "Espejos de agua", layer: "espejo_de_agua_hid", base: false };
        overlays[2] =  { name: "Actividades agropecuarias", layer: "actividades_agropecuarias", base: false };
        overlays[3] =  { name: "Actividades económicas", layer: "actividades_economicas", base: false };
        overlays[4] =  { name: "Complejo de energía", layer: "complejo_de_energia_ene", base: false };
        overlays[5] =  { name: "Edificios ferroviarios", layer: "edificios_ferroviarios", base: false };
        overlays[6] =  { name: "Atracciones turísticas", layer: "edif_construcciones_turisticas", base: false };
        overlays[7] =  { name: "Deportes y esparcimiento", layer: "edif_depor_y_esparcimiento", base: false };
        overlays[8] =  { name: "Edificios de educación", layer: "edif_educacion", base: false };
        overlays[9] =  { name: "Edificios religiosos", layer: "edif_religiosos", base: false };
        overlays[10] = { name: "Edificios de salud pública", layer: "edificio_de_salud_ips", base: false };
        overlays[11] = { name: "Edificios de seguridad pública", layer: "edificio_de_seguridad_ips", base: false };
        overlays[12] = { name: "Edificios públicos", layer: "edificio_publico_ips", base: false };
        overlays[13] = { name: "Curvas de nivel", layer: "curvas_de_nivel", base: false };
        overlays[14] = { name: "Ejido", layer: "ejido", base: false };
        overlays[15] = { name: "Estructuras portuarias", layer: "estructuras_portuarias", base: false };
        overlays[16] = { name: "Infraestructura aeroportuaria", layer: "infraestructura_aeroportuaria_punto", base: false };
        overlays[17] = { name: "Vegetación hidrófila", layer: "veg_hidrofila", base: false };
        overlays[18] = { name: "Límite político administrativo", layer: "limite_politico_administrativo_lim", base: true };
        overlays[19] = { name: "Infraestructura hidroeléctrica", layer: "Infraestructura_Hidro", base: false };
        overlays[20] = { name: "Islas", layer: "Isla", base: false };
        overlays[21] = { name: "Líneas de conducción de energía", layer: "Lineas_de_Conduccion_Ene", base: false };
        overlays[22] = { name: "Localidades", layer: "Localidades", base: false };
        overlays[23] = { name: "Marcas y señales", layer: "Marcas_y_Senales", base: false };
        overlays[24] = { name: "Muro de embalse", layer: "Muro_Embalse", base: false };
        overlays[25] = { name: "Obras de comunicación", layer: "Obra_de_Comunicacion", base: false };
        overlays[26] = { name: "Vegetación cultivos", layer: "veg_cultivos", base: false };
        overlays[27] = { name: "Pais limítrofe", layer: "Pais_Lim", base: false };
        overlays[28] = { name: "Puente Red Vial", layer: "Puente_Red_Vial_Puntos", base: false };
        overlays[29] = { name: "Puntos de altura topográficas", layer: "Puntos_de_Alturas_Topograficas", base: false };
        overlays[30] = { name: "Puntos del terreno", layer: "Puntos_del_Terreno", base: false };
        overlays[31] = { name: "Salvado de obstáculos", layer: "Salvado_de_Obstaculo", base: false };
        overlays[32] = { name: "Señalizaciones", layer: "Senalizaciones", base: false };
        overlays[33] = { name: "Suelo congelado", layer: "Sue_congelado", base: false };
        overlays[34] = { name: "Suelo costero", layer: "Sue_costero", base: false };
        overlays[35] = { name: "Vegetación arbórea", layer: "Veg_Arborea", base: false };
        overlays[36] = { name: "Obra portuaria", layer: "obra_portuaria", base: false };
        overlays[37] = { name: "Otras edificaciones", layer: "otras_edificaciones", base: false };
        overlays[38] = { name: "Red ferroviaria", layer: "red_ferroviaria", base: false };
        overlays[39] = { name: "Red vial", layer: "red_vial", base: false };
        overlays[40] = { name: "Suelo consolidado", layer: "sue_consolidado", base: false };
        overlays[41] = { name: "Suelo hidromorfológico", layer: "sue_hidromorfologico", base: false };
        overlays[42] = { name: "Suelo no consolidado", layer: "sue_no_consolidado", base: false };
        overlays[43] = { name: "Vegetación arbustiva", layer: "veg_arbustiva", base: false };
        overlays[44] = { name: "Vegetación suelo desnudo", layer: "veg_suelo_desnudo", base: false };
        overlays[45] = { name: "Vías secundarias", layer: "vias_secundarias", base: false };
        overlays[46] = { name: "Datos del usuario", layer: "datos_del_usuario", base: false };

        var map, measureControls, drawingLayer;

        $(document).ready( init );
    
        function init( )
        {
            map = new OpenLayers.Map( 'mapa', { 
              maxExtent: new OpenLayers.Bounds(-91, -66, -39, -20),
              scales:[24000000, 12000000, 6000000, 3000000, 1500000, 750000, 375000, 187500, 93750],
              controls:[]
              } );

            // Función para ordenar alfabéticamente el arreglo de capas
            overlays.sort( function (a, b) {
                var l1 = a.name.toLowerCase();
                var l2 = b.name.toLowerCase();
                if( l1 < l2)
                    return -1;
                if( l1 > l2 )
                    return 1;
                return 0;
              });
            
            // Agrega todas las capas
            for( i = 0; i < overlays.length; i++ ) {
                var Layer = new OpenLayers.Layer.WMS(
                    overlays[i].name,
                    <?php echo $service ?>,
                    { layers: overlays[i].layer, format: 'image/png', transparent: true },
                    { isBaseLayer: overlays[i].base, singleTile: false, visibility: overlays[i].base }
                );
                map.addLayer( Layer );
            }

            addLayers( );

            drawingLayer = new OpenLayers.Layer.Vector( "drawingLayer" );
            map.addLayer( drawingLayer );

            // Remueve todas las geometrías anteriores antes de dibujar una nueva
            drawingLayer.events.on({
                     "beforefeatureadded" : function( event ) { this.removeAllFeatures() } 
            });

            // Establece el valor del zoom para enviarlo en la consulta
            map.events.on({ "zoomend" : mapZoomed });

            map.addControls([
                new OpenLayers.Control.Scale(),        // escala númerica
                new OpenLayers.Control.ScaleLine(),    // escala gráfica
                new OpenLayers.Control.MousePosition() // coordenadas del puntero del mouse
            ]);

            // Paneo y zoom con barra de desplazamiento
            var panZoom = new OpenLayers.Control.PanZoomBar();
            map.addControl( panZoom );

            // Control de paneo y zoom a la selección
            var navToolbar = new OpenLayers.Control.NavToolbar();
            map.addControl( navToolbar );

            // Controles de medida de distancia y área
            measureControls = {
                mLine: new OpenLayers.Control.Measure( OpenLayers.Handler.Path, { persist: true } ),
                mPolygon: new OpenLayers.Control.Measure( OpenLayers.Handler.Polygon, { persist: true } ),
                qPoint: new OpenLayers.Control.DrawFeature( drawingLayer, OpenLayers.Handler.Point, { featureAdded: featureAdded } ),
                qPolygon: new OpenLayers.Control.DrawFeature( drawingLayer, OpenLayers.Handler.Polygon, { featureAdded: featureAdded } ),
                fPoint: new OpenLayers.Control.DrawFeature( drawingLayer, OpenLayers.Handler.Point, { featureAdded: showAddFeatureForm } )
            };

            // Eventos para los controles de medida
            var control;
            for(var key in measureControls) {
                control = measureControls[key];
                control.events.on({
                    "measure": handleMeasurements,
                    "measurepartial": handleMeasurements
                });
                map.addControl(control);
            }

            // Eventos para activar/desactivar los controles de medida con los radios y checkboxes
            $('#rControlsOff').click( function( event ) {
                deactivateControl( 'measure' );
                deactivateControl( 'query' );
                deactivateControl( 'addFeature' );
            }).attr( {checked: true} );

            $('#rDistance, #rArea, #rQueryPoint, #rQueryPolygon').click( toggleControl );
            $('#chkInm').click( toggleImmediate );
            $('#chkGeo').click( toggleGeodesic );
            $(document.queryForm).submit( sendQuery );

            $('#btnAddFeature').click( btnAddFeatureClick );
            $('#submitFeature').click( btnSubmitFeatureClick );

            // Botones para mostrar/ocultar la tabla con las opciones de los controles
            $('.collapseButton').click( function() {
                var table = $( '#' + $(this).attr('value') );
                toggleElementVisibility( table, $(this), '▶', '▼' );
                return false;
            });

            // Selecciona por defecto la primera capa base
            $('#capas ul li div input[type=radio]').each( function( index ){ this.checked = map.layers[ this.value ].getVisibility() } );
          
            // Desactiva los controles cuando se hace click en la X del formulario para agregar features
            $('.closeButton').click( function( event ) { $('#rControlsOff').click( ) } );

            // Función de validación para permitir solamente números en los campos de coordenadas
            $("input[name='coordX'], input[name='coordY']").keydown( validateCoords );

            map.zoomToMaxExtent();
        }

        // Construye la lista de capas de la izquierda
        function addLayers( )
        {
            var layers = $('<ul></ul>').prependTo('#capas');

            var activatedDiv = $('<div></div>').addClass('activeDiv').addClass('hoverClicked').text('activa')

            var activeButton = $('<div></div>').addClass('activeDiv').addClass('hoverActive').text('activar')
                                .click( function(event) {
                                    $(this).parent().append( activatedDiv );
                                    $(this).detach();
                                    if( measureControls.fPoint.active )
                                      $('#rControlsOff').click();
                                  });

            for( i = 0; i < map.layers.length; i++ ) {
                var referenceImage = <?php echo $service ?> + "&layers=" + map.layers[i].params.LAYERS + "&mode=legend";
                var listItemDiv = $('<div></div>')
                                      .hover(function() {
                                        if( $(this).find('.hoverClicked').length == 0 )
                                          $(this).append( activeButton.text('activar') );
                                      }, function() {
                                        $(this).find('.hoverActive').detach();
                                      });

                var casilla = $('<input>', { type: 'checkbox', name: 'checkBox', value: i })
                               .click(function( event ){
                                  $('#capas ul li div input').each( function( index ){ map.layers[ this.value ].setVisibility( this.checked ) } );
                                });

                var button = $('<button></button>').text('+')
                              .click(function() {
                                var img = $(this).parent().parent().find('img');
                                toggleElementVisibility( img, $(this), '+', '-' );
                              });

                listItemDiv.append( button )
                           .append( map.layers[i].name );

                // Si es una capa base, cambia el checkbox por un radio
                if( map.layers[i].isBaseLayer )
                {
                    casilla.attr( {type: 'radio'} );
                    button.after( casilla );
                    listItemDiv.prependTo( layers );
                }
                else
                {
                    button.after( casilla );
                    listItemDiv.appendTo( layers );
                }

                listItemDiv.wrap('<li></li>')
                           .after( $('<img>', { src: referenceImage }) );;
            }
             
            //Agrega los títulos
            var baseLayerItems = $('#capas ul li div input[type=radio]').parent().parent();
            baseLayerItems.first().before( $('<li class="layerTitle">Capas base</li>') );
            baseLayerItems.last().after( $('<li class="layerTitle">Capas sobrepuestas</li>') );
        }

        function mapZoomed( event ) {
          document.queryForm.zoomLevel.value = event.object.zoom;
        }

        function openWindow(url, wname, width, height) {
          window.open(url, wname, "height=" + height + ",width=" + width + "location = 0, status = 1, resizable = 0, scrollbars = 1, toolbar = 0");
        }

        // Muestra/oculta algún elemento
        function toggleElementVisibility( element, source, textShow, textHide ) {
            if( element.is(':hidden') ) {
              element.fadeIn('fast');
              if( source != null )
                source.text( textHide );
            }
            else {
              element.fadeOut('fast');
              if( source != null )
                source.text( textShow );
            }
        }

        function handleMeasurements( event ) {           
            setDistanceValue( event.measure, event.units, event.order );
        }

        // Función para establecer el resultado de la medición
        function setDistanceValue( value, units, order ) {
            var element = $('#tableDist .resultado');
            element.text( value.toFixed(3) + " " + units );

            if(order == 2)
                element.append("<sup>2</sup>");
        }

        // Activa/desactiva los controles
        function toggleControl( event ) {
            var footer = $('#tableDist tfoot');
            for(key in measureControls) {
                var control = measureControls[key];
                if(event.currentTarget.value == key && event.currentTarget.checked) {
                    switch( key ) {
                      case 'mLine':
                      case 'mPolygon':
                        if( footer.is(':hidden') )
                          footer.fadeIn('fast');
                        deactivateControl( 'query' );
                        deactivateControl( 'addFeature' );
                        break;
                      case 'qPoint':
                      case 'qPolygon':
                        deactivateControl( 'measure' );
                        deactivateControl( 'addFeature' );
                        break;
                    }
                    control.activate();
                } else {
                    control.deactivate();
                }
            }
        }

        function toggleGeodesic( event ) {
            for(key in measureControls) {
                var control = measureControls[key];
                control.geodesic = event.currentTarget.checked;
            }
        }

        function toggleImmediate( event ) {
            for(key in measureControls) {
                var control = measureControls[key];
                control.setImmediate( event.currentTarget.checked );
            }
        }

        function deactivateControl( control ) {
          switch (control) {
            case 'measure':
              $('#tableDist tfoot').fadeOut('fast', function() { setDistanceValue( 0, 'm', 1 ); });
              for(key in measureControls ) //TODO: que no desactive los controles de consulta
                  measureControls[key].deactivate();
              break;
            case 'query':
              drawingLayer.removeAllFeatures();
              document.queryForm.geometry.value = "";
              break;
            case 'addFeature':
              drawingLayer.removeAllFeatures();
              $('#abmBox').slideUp('fast');
              break;
          }
        }

        function getActiveLayerIndex() {
          // El índice para el arreglo de capas se obtiene del valor del checkbox.
          var activeDiv = $('#capas div.hoverClicked');
          if( activeDiv.length > 0 )
            return activeDiv.parent().find('input').attr('value');
          else
            return null;
        }

        function featureAdded( event ) {
          document.queryForm.geometry.value = event.geometry.toString();
        }

        function sendQuery( event )
        {
            var layerIndex = getActiveLayerIndex();

            if( layerIndex != null ) {
              if( document.queryForm.geometry.value == "" ) {
                alert('No se ha seleccionado una geometría para la consulta.');
                return false;
              }

              var activeLayer = map.layers[ layerIndex ].params.LAYERS;

              document.queryForm.activeLayer.value = activeLayer.toLowerCase();
              document.queryForm.activeLayerTitle.value = map.layers[ layerIndex ].name;

              openWindow( 'consulta.php', 'popupWin', 700, 500 );
              
              return true;
            }
            else
              alert('No hay una capa activa actualmente.');
              return false;
        }

        function showAddFeatureForm( event ) {
          var abmBox = $('#abmBox');
          $(document).off('mousemove');

          abmBox.css('left', window.mouseX + 'px');
          abmBox.css('top', window.mouseY + 'px');

          document.submitFeatureForm.coordX.value = event.geometry.x;
          document.submitFeatureForm.coordY.value = event.geometry.y;
          document.submitFeatureForm.txtName.value = "";
          document.submitFeatureForm.txtDescripcion.value = "";

          abmBox.slideDown('fast', function() { document.submitFeatureForm.txtName.focus() } );
        }

        function btnAddFeatureClick( event ) {
          var activeLayer = getActiveLayerIndex( );
          if( activeLayer == null )
          {
            alert('No hay una capa activa actualmente.');
            return false;
          }
          if( map.layers[ activeLayer ].params.LAYERS != 'datos_del_usuario' ) 
          {
            alert('Actualmente sólo pueden agregarse nuevos datos a la capa "Datos del usuario".');
            return false;
          }

          var abmBox = $('#abmBox');
          if( !abmBox.is(':hidden') )
            abmBox.slideUp('fast');

          $('#rControlsOff').attr( { checked: false } );
          deactivateControl( 'measure' );
          deactivateControl( 'query' );

          measureControls.fPoint.activate();

          // Remueve el evento que observa la posición del mouse para no agregar muchos eventos iguales
          $(document).off('mousemove');

          // Mantiene el rastro de la posición del mouse para mostrar el formulario de agregar features
          $(document).on( 'mousemove', function(e) {
                                    window.mouseX = e.pageX;
                                    window.mouseY = e.pageY;
                                 } );

          return false;
        }

        function validateCoords( event ) {
          var allowedKeys = [8, 9, 37, 38, 39, 40, 46, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57,
                             96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 109, 110, 189, 190];
          if( allowedKeys.indexOf( event.keyCode ) < 0 )
            event.preventDefault( );
        }

        function btnSubmitFeatureClick( event ) {
          $.post( 'agregar.php', { coordX: document.submitFeatureForm.coordX.value,
                                   coordY: document.submitFeatureForm.coordY.value,
                                   name: document.submitFeatureForm.txtName.value,
                                   descripcion: document.submitFeatureForm.txtDescripcion.value }, addFeatureResponse );
          return false;
        }

        function addFeatureResponse( data ) {
          $('#rControlsOff').click( );
          try {
            var result = $.parseJSON( data );
          } catch (e) {
            alert('Respuesta JSON inválida. Algo se rompió en el servidor. ' + 
                  'No deberías estar viendo esto. Mi código es perfecto.');
            return;
          }
          if( result.Error != '' ) {
            alert('Ocurrió un error al realizar la consulta. ' + result.Error );
            return;
          }
          // Desplaza la caja de controles para que se pueda ver el mensaje de confirmación
          var controlesDiv = $('#controles');
          controlesDiv.animate( { scrollTop: controlesDiv.prop('scrollHeight') }, 2000 );

          $('#tableFeatures .hiddenFooter span').text('Nuevo lugar agregado en "'+ result.LayerTitle + '"');
          $('#tableFeatures .hiddenFooter').fadeIn('fast');
    
          // Vuelve a cargar la capa
          var layerIndex = getActiveLayerIndex();
          map.layers[ layerIndex ].redraw(true);
          map.layers[ layerIndex ].refresh();
        }
        </script>
    </head>
    <body>
        <div id="izq">
            <div id="capas"></div>
            <div id="controles">
              <div class="layerTitle">Herramientas</div>
              <form name="queryForm" action="consulta.php" method="post" target="popupWin">
                <div>
                  <button class="collapseButton" value="tableDist">▼</button><label>Medir</label>
                  <table id="tableDist">
                    <tbody>
                      <tr>
                        <td><input name="ctrlRadio" id="rDistance" type="radio" value="mLine">Distancia</td>
                        <td><input name="ctrlRadio" id="rArea" type="radio" value="mPolygon">Área</td>
                      </tr>
                      <tr>
                        <td><input name="ctrlRadio" id="chkGeo" type="checkbox">Medida geodésica</td>
                        <td><input name="ctrlRadio" id="chkInm" type="checkbox">Medida inmediata</td>
                      </tr>
                    </tbody>
                    <tfoot class="hiddenFooter">
                      <tr>
                        <td colspan="2">Resultado: <span class="resultado">0.000 m</span></td>
                      </tr>
                    </tfoot>
                  </table>
                </div>
                <div>
                  <button class="collapseButton" value="tableQuery">▼</button><label>Consultar</label>
                  <table id="tableQuery">
                    <tbody>
                      <tr>
                        <td><input name="ctrlRadio" id="rQueryPoint" type="radio" value="qPoint">Punto</td>
                        <td><input name="ctrlRadio" id="rQueryPolygon" type="radio" value="qPolygon">Polígono</td>
                        <td><button class="styledButton" id="sendQuery">Enviar</button></td>
                        <input name="geometry" type="hidden">
                        <input name="activeLayer" type="hidden">
                        <input name="activeLayerTitle" type="hidden">
                        <input name="zoomLevel" type="hidden">
                      </tr>
                    </tbody>
                  </table>
                </div>
                <div>
                  <button class="collapseButton" value="tableFeatures">▼</button><label>Datos de usuario</label>
                  <table id="tableFeatures">
                    <tbody>
                      <tr>
                        <td><button class="styledButton" id="btnAddFeature">Agregar lugar</button></td>
                      </tr>
                    </tbody>
                    <tfoot class="hiddenFooter">
                      <tr>
                        <td align="center"><span class="resultado2"></span></td>
                      </tr>
                    </tfoot>
                  </table>
                </div>
                <input name="ctrlRadio" id="rControlsOff" type="radio">Navegar
              </form>
            </div>
        </div>
        <div id="mapa"></div>
        <div id="abmBox">
            <div class="layerTitle abmBoxTitle">Agregar nuevo lugar
              <button class="closeButton">X</button>
            </div>
            <div id="abmContents">
              <form name="submitFeatureForm">
                <table id="tableAddFeature">
                  <tbody>
                    <tr>
                      <td><label>Coordenada X:</label></td>
                      <td><input name="coordX" type="text" value="0.000000000"></td>
                    </tr>
                    <tr>
                      <td><label>Coordenada Y:</label></td>
                      <td><input name="coordY" type="text" value="0.000000000"></td>
                    </tr>
                    <tr>
                      <td><label>Nombre:</label></td>
                      <td><input name="txtName" type="text" value="lalala"></td>
                    </tr>
                    <tr>
                      <td><label>Descripción:</label></td>
                      <td><input name="txtDescripcion" type="text" value="descripción"></td>
                    </tr>
                    <tr>
                      <td colspan="2" align="center"><button class="styledButton" id="submitFeature">Agregar</button></td>
                    </tr>
                  </tbody>
                </table>
              </form>
            </div>
        </div>
        <div id="pageFoot">Sistemas de Información Geográficos - Trabajo Práctico - Año 2011</div>
    </body>
</html>